<script lang="ts" setup>
import { Modal } from 'ant-design-vue';

defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();
</script>

<template>
  <Modal
    :open="visible"
    title="📚 资源目录管理使用指南"
    width="1200px"
    :footer="null"
    @cancel="emit('update:visible', false)"
  >
    <div class="catalog-usage-guide">
      <div class="guide-header">
        <p class="guide-subtitle">
          资源目录是统一管理所有资源的核心模块，支持分类管理、资源编排、权限控制等功能
        </p>
      </div>

      <!-- 功能概述 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🎯 功能概述</h3>
        </div>
        <div class="section-content">
          <div class="feature-grid">
            <div class="feature-item">
              <h4>📂 分类管理</h4>
              <p>支持多级分类结构，灵活组织资源分类体系</p>
            </div>
            <div class="feature-item">
              <h4>🔍 资源管理</h4>
              <p>统一的资源增删改查，支持批量操作和高级搜索</p>
            </div>
            <div class="feature-item">
              <h4>🎨 模板应用</h4>
              <p>通过资源模板快速创建和管理同类资源</p>
            </div>
            <div class="feature-item">
              <h4>🔐 权限控制</h4>
              <p>细粒度的权限管理，确保资源访问安全</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作流程 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔄 标准操作流程</h3>
        </div>
        <div class="section-content">
          <div class="process-flow">
            <div class="flow-step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h4>创建分类</h4>
                <p>在左侧分类树中点击"新增分类"，配置分类基本信息</p>
              </div>
            </div>
            <div class="flow-step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h4>添加资源</h4>
                <p>选择分类后，点击"新增资源"创建具体资源</p>
              </div>
            </div>
            <div class="flow-step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h4>配置属性</h4>
                <p>设置资源的属性、能力、约束等详细信息</p>
              </div>
            </div>
            <div class="flow-step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h4>关联模板</h4>
                <p>将资源关联到相应的模板，实现标准化管理</p>
              </div>
            </div>
            <div class="flow-step">
              <div class="step-number">5</div>
              <div class="step-content">
                <h4>设置权限</h4>
                <p>配置资源的访问权限和使用规则</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分类管理示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>📂 分类管理示例</h3>
        </div>
        <div class="section-content">
          <div class="example-tabs">
            <div class="tab-content active">
              <h4>🏨 酒店资源分类示例</h4>
              <div class="category-tree-example">
                <div class="tree-node root">
                  <span class="node-icon">🏨</span>
                  <span class="node-name">酒店资源</span>
                  <span class="node-count">(156)</span>
                </div>
                <div class="tree-node level-1">
                  <span class="node-icon">🛏️</span>
                  <span class="node-name">客房资源</span>
                  <span class="node-count">(120)</span>
                </div>
                <div class="tree-node level-2">
                  <span class="node-icon">🛌</span>
                  <span class="node-name">标准客房</span>
                  <span class="node-count">(80)</span>
                </div>
                <div class="tree-node level-2">
                  <span class="node-icon">👑</span>
                  <span class="node-name">豪华套房</span>
                  <span class="node-count">(30)</span>
                </div>
                <div class="tree-node level-2">
                  <span class="node-icon">🏛️</span>
                  <span class="node-name">总统套房</span>
                  <span class="node-count">(10)</span>
                </div>
                <div class="tree-node level-1">
                  <span class="node-icon">🍽️</span>
                  <span class="node-name">餐饮资源</span>
                  <span class="node-count">(36)</span>
                </div>
                <div class="tree-node level-2">
                  <span class="node-icon">🍴</span>
                  <span class="node-name">餐厅餐桌</span>
                  <span class="node-count">(20)</span>
                </div>
                <div class="tree-node level-2">
                  <span class="node-icon">🎉</span>
                  <span class="node-name">宴会厅</span>
                  <span class="node-count">(16)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 资源管理示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔧 资源管理示例</h3>
        </div>
        <div class="section-content">
          <div class="resource-examples">
            <div class="resource-example">
              <h4>🏨 客房资源示例</h4>
              <div class="resource-card">
                <div class="resource-header">
                  <span class="resource-icon">🛏️</span>
                  <span class="resource-name">标准双人间-101</span>
                  <span class="resource-status available">可用</span>
                </div>
                <div class="resource-details">
                  <div class="detail-item">
                    <span class="label">房间号：</span>
                    <span class="value">101</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">楼层：</span>
                    <span class="value">1楼</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">面积：</span>
                    <span class="value">35㎡</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">床型：</span>
                    <span class="value">双床</span>
                  </div>
                </div>
                <div class="resource-actions">
                  <button class="action-btn view">查看</button>
                  <button class="action-btn edit">编辑</button>
                  <button class="action-btn manage">管理</button>
                </div>
              </div>
            </div>

            <div class="resource-example">
              <h4>🍽️ 餐桌资源示例</h4>
              <div class="resource-card">
                <div class="resource-header">
                  <span class="resource-icon">🍴</span>
                  <span class="resource-name">大厅餐桌-A01</span>
                  <span class="resource-status occupied">占用</span>
                </div>
                <div class="resource-details">
                  <div class="detail-item">
                    <span class="label">桌号：</span>
                    <span class="value">A01</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">区域：</span>
                    <span class="value">大厅</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">座位数：</span>
                    <span class="value">4人桌</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">状态：</span>
                    <span class="value">用餐中</span>
                  </div>
                </div>
                <div class="resource-actions">
                  <button class="action-btn view">查看</button>
                  <button class="action-btn edit">编辑</button>
                  <button class="action-btn manage">管理</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作技巧 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>💡 操作技巧</h3>
        </div>
        <div class="section-content">
          <div class="tips-grid">
            <div class="tip-item">
              <h4>🔍 快速搜索</h4>
              <ul>
                <li>使用搜索框快速定位资源</li>
                <li>支持按名称、编码、分类搜索</li>
                <li>可使用通配符 * 进行模糊匹配</li>
              </ul>
            </div>
            <div class="tip-item">
              <h4>📋 批量操作</h4>
              <ul>
                <li>选中多个资源进行批量编辑</li>
                <li>支持批量修改分类和状态</li>
                <li>可批量导出资源信息</li>
              </ul>
            </div>
            <div class="tip-item">
              <h4>🎨 个性化设置</h4>
              <ul>
                <li>自定义资源显示字段</li>
                <li>设置个人收藏和标签</li>
                <li>配置个性化视图布局</li>
              </ul>
            </div>
            <div class="tip-item">
              <h4>📊 数据统计</h4>
              <ul>
                <li>查看分类资源统计信息</li>
                <li>监控资源使用情况</li>
                <li>分析资源利用率</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 最佳实践 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>⭐ 最佳实践</h3>
        </div>
        <div class="section-content">
          <div class="best-practices">
            <div class="practice-item">
              <h4>📁 分类命名规范</h4>
              <ul>
                <li>使用清晰的业务术语命名分类</li>
                <li>保持分类层级不超过3级</li>
                <li>为分类添加详细的描述信息</li>
                <li>定期清理无用的分类</li>
              </ul>
            </div>
            <div class="practice-item">
              <h4>🏷️ 资源编码规范</h4>
              <ul>
                <li>使用统一的编码规则</li>
                <li>编码应具有业务含义</li>
                <li>避免使用特殊字符</li>
                <li>保持编码的唯一性</li>
              </ul>
            </div>
            <div class="practice-item">
              <h4>🔐 权限管理</h4>
              <ul>
                <li>遵循最小权限原则</li>
                <li>定期审查权限设置</li>
                <li>为不同角色设置合适的权限</li>
                <li>记录权限变更日志</li>
              </ul>
            </div>
            <div class="practice-item">
              <h4>📈 数据维护</h4>
              <ul>
                <li>定期备份重要数据</li>
                <li>及时更新资源状态</li>
                <li>清理过期和无效数据</li>
                <li>监控数据质量</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>❓ 常见问题</h3>
        </div>
        <div class="section-content">
          <div class="faq-list">
            <div class="faq-item">
              <h4>Q: 如何批量导入资源？</h4>
              <p>
                A:
                可以使用Excel模板批量导入资源，在"新增资源"页面选择"批量导入"功能。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 资源分类可以删除吗？</h4>
              <p>
                A: 只有没有关联资源的分类才能删除，建议先迁移或删除相关资源。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 如何设置资源的使用权限？</h4>
              <p>
                A: 在资源详情页面点击"权限设置"，可以为不同角色配置访问权限。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 支持哪些资源状态？</h4>
              <p>
                A: 支持可用、占用、维护、停用等状态，可根据业务需要自定义状态。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
.catalog-usage-guide {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 8px;
}

.guide-header {
  margin-bottom: 24px;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.guide-subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.guide-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.section-header h3 {
  color: #1890ff;
  font-size: 18px;
  margin-bottom: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

.section-content {
  color: #262626;
  line-height: 1.6;
}

// 功能网格
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.feature-item {
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  h4 {
    color: #1890ff;
    margin-bottom: 8px;
    font-size: 16px;
  }

  p {
    color: #595959;
    margin: 0;
    font-size: 14px;
  }
}

// 操作流程
.process-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}

.step-number {
  width: 32px;
  height: 32px;
  background: #1890ff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  flex: 1;

  h4 {
    color: #1890ff;
    margin-bottom: 4px;
    font-size: 16px;
  }

  p {
    color: #595959;
    margin: 0;
    font-size: 14px;
  }
}

// 分类树示例
.category-tree-example {
  background: white;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #d9d9d9;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;

  &.root {
    font-weight: bold;
    color: #1890ff;
  }

  &.level-1 {
    padding-left: 20px;
    color: #262626;
  }

  &.level-2 {
    padding-left: 40px;
    color: #595959;
  }

  .node-icon {
    font-size: 16px;
  }

  .node-name {
    flex: 1;
  }

  .node-count {
    color: #8c8c8c;
    font-size: 12px;
  }
}

// 资源示例
.resource-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.resource-example h4 {
  color: #1890ff;
  margin-bottom: 12px;
  font-size: 16px;
}

.resource-card {
  background: white;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.resource-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;

  .resource-icon {
    font-size: 18px;
  }

  .resource-name {
    flex: 1;
    font-weight: 500;
    color: #262626;
  }

  .resource-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;

    &.available {
      background: #f6ffed;
      color: #52c41a;
      border: 1px solid #b7eb8f;
    }

    &.occupied {
      background: #fff2e8;
      color: #fa8c16;
      border: 1px solid #ffd591;
    }
  }
}

.resource-details {
  padding: 12px 16px;
}

.detail-item {
  display: flex;
  margin-bottom: 6px;

  .label {
    width: 80px;
    color: #8c8c8c;
    font-size: 13px;
  }

  .value {
    flex: 1;
    color: #262626;
    font-size: 13px;
  }
}

.resource-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
}

.action-btn {
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: white;
  color: #595959;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: #1890ff;
    color: #1890ff;
  }

  &.view {
    &:hover {
      background: #e6f7ff;
    }
  }

  &.edit {
    &:hover {
      background: #fff7e6;
    }
  }

  &.manage {
    &:hover {
      background: #f6ffed;
    }
  }
}

// 技巧网格
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.tip-item {
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d9d9d9;

  h4 {
    color: #1890ff;
    margin-bottom: 8px;
    font-size: 16px;
  }

  ul {
    margin: 0;
    padding-left: 16px;
  }

  li {
    margin-bottom: 4px;
    color: #595959;
    font-size: 14px;
  }
}

// 最佳实践
.best-practices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.practice-item {
  padding: 16px;
  background: white;
  border-radius: 6px;
  border-left: 4px solid #faad14;

  h4 {
    color: #1890ff;
    margin-bottom: 8px;
    font-size: 16px;
  }

  ul {
    margin: 0;
    padding-left: 16px;
  }

  li {
    margin-bottom: 6px;
    color: #595959;
    font-size: 14px;
  }
}

// 常见问题
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d9d9d9;

  h4 {
    color: #1890ff;
    margin-bottom: 8px;
    font-size: 16px;
  }

  p {
    color: #595959;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .guide-section {
    padding: 16px;
  }

  .feature-grid,
  .tips-grid,
  .best-practices {
    grid-template-columns: 1fr;
  }

  .resource-examples {
    grid-template-columns: 1fr;
  }

  .flow-step {
    flex-direction: column;
    gap: 12px;
  }

  .step-number {
    align-self: flex-start;
  }
}
</style>
